<template>
  <div class="demo-title">grid/demo4</div>
  <div class="demo">
    <Grid columns="1fr 2fr 2fr 1fr" column-gap="10px" rows="100px 100px" row-gap="10px">
      <div v-for="(item, i) in 8" :key="`gridItem${i}`" class="grid-item"> Text {{ i + 1 }} </div>
    </Grid>
  </div>
</template>

<script lang="ts" setup>
  import Grid from '@sscd-mobile/grid'
</script>

<style lang="less" scoped>
  .demo {
    height: 220px;
    .grid-item {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
    }
  }
</style>
